<template>
    <div class="my-header">


        <div class="title">land管理系统</div>
        <div class="info">
            欢迎 {{ userInfo.nickname }}， <span> <a href="javascript:;" @click="logout()">退出</a> </span>
        </div>
    </div>
</template>


<script setup lang="ts">

import { reactive, ref } from 'vue';
import { UserInfo } from '../domain/entity/UserInfo';
import * as SystemUserApi from '../api/SystemUserApi';
import * as CommonApi from '../api/CommonApi';
import router from '../router';
import SystemConstant from '../common/SystemConstant';
import { ElMessage } from 'element-plus';
import { useTokenStore } from '../store/UseTokenStore';

const userInfo = reactive<UserInfo>(new UserInfo());

SystemUserApi.getUserInfo()
    .then(response => response.data.data)
    .then(data => {
        userInfo.id = data.id;
        userInfo.nickname = data.nickname;
        userInfo.username = data.username;
    });


const tokenManager = useTokenStore()

const logout = function () {
    CommonApi.logout().then(response => response.data.data).then(data => {
        ElMessage.success("退出成功");
        tokenManager.removeToken();
        router.push(SystemConstant.loginRoutePath);
    });

}

</script>

<style scoped>
.my-header {
    display: flex;
    justify-content: space-between;
}

.my-header>.title {
    line-height: 60px;
}

.my-header>.info {
    line-height: 60px;
}
</style>
